<script setup>
	import { ref } from 'vue'
	import { orderDetailApi } from '@/services/medicine'
	// 获取地址的参数
	const props = defineProps({
		orderId: String,
	})
	// 药品订单详情
	const orderDetail = ref({})

	// 查询订单详情
	async function getOrderDetail(orderId) {
		// 订单详情接口
		const { code, data, message } = await orderDetailApi(props.orderId)
		// 检测接口是否调用成功
		if (code !== 10000) return uni.utils.toast(message)
		// 渲染订单数据
		orderDetail.value = data
	}
	getOrderDetail()
	/**
	 * orderDetail.id: 处方订单id
	 * orderDetail.roomId: 图文问诊id
	 */
	
</script>
<template>
	<view class="pay_result_page">
		<uni-icons size="70" color="#20c6b2" type="checkbox" />
		<view class="price"> ¥ {{ orderDetail.actualPayment }} </view>
		<view class="success"> 支付成功 </view>
		<view class="msg">
			订单支付成功，已通知药房尽快发出，请耐心等待~
		</view>
		<view class="btn">
			<navigator
				hover-class="none"
				:url="`/subpkg_medicine/order_detail/index?orderId=${orderDetail.id}`"
				class="uni-button"
				>查看订单</navigator
			>
			<navigator
				hover-class="none"
				:url="`/subpkg_consult/room/index?orderId=${orderDetail.roomId}`"
				class="uni-button plain"
				open-type="redirect"
				>返回诊室</navigator
			>
		</view>
	</view>
</template>

<style lang="scss">
	.pay_result_page {
		padding: 100rpx 60rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		text-align: center;
		.price {
			font-size: 44rpx;
			font-weight: 600;
			color: #333;
			margin-top: 30rpx;
		}
		.success {
			font-size: 28rpx;
			color: #3c3e42;
			margin-top: 20rpx;
		}
		.msg {
			line-height: 1.5;
			padding: 0 70rpx;
			font-size: 28rpx;
			color: #979797;
			margin-top: 40rpx;
		}
		.btn {
			display: flex;
			justify-content: space-between;
			margin-top: 60rpx;
		}
		.uni-button {
			width: 280rpx;
			&.plain {
				background-color: #fff;
				color: #20c6b2;
				border: 1px solid #20c6b2;
			}
		}
	}
</style>
